<template>
	<view class="container">
		<uni-nav-bar title="新增员工" fixed statusBar :border="false" height="88rpx" left-icon="left" @clickLeft="onClickLeft"></uni-nav-bar>
		<view class="content" :style="{paddingBottom: `calc(${safeAreaBottom}px + 80rpx)`}">
			<uni-forms ref="form" :rules="rules" :model="valiFormData" :label-width="90" validate-trigger="blur">
				<uni-forms-item label="员工姓名：" required name="employeeName">
					<uni-easyinput v-model="valiFormData.employeeName" placeholder="请输入员工姓名,最多10位" adjust-position/>
				</uni-forms-item>
				<uni-forms-item label="登录账号：" required name="userName">
					<uni-easyinput v-model="valiFormData.userName" placeholder="请输入登录手机号" adjust-position/>
				</uni-forms-item>
				<uni-forms-item label="登录密码：" required name="password">
					<uni-easyinput v-model="valiFormData.password" placeholder="请输入登录密码" adjust-position/>
				</uni-forms-item>
				<uni-forms-item label="员工角色：" required name="roleList">
					<MySelectCheckbox v-model="valiFormData.roleList" multiple dataKey="roleName" dataValue="id" :localdata="roleInfoList" placeholder="请选择员工角色">
					</MySelectCheckbox>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="bottomFix btn type-1 toLeft" :style="{paddingBottom:safeAreaBottom + 'px'}" @click.stop="toSubmit">
			<text>确 定</text>
		</view>
	</view>
</template>

<script>
	import { reqAddUser, reqRoleList } from '@/apis/user.js'
	export default {
		name: 'AddUser',
		data() {
			return {
				roleInfoList: [],
				valiFormData: {
					employeeName: '',
					userName: '',
					password: '',
					roleList: []
				},
				// 校验规则
				rules: {
					employeeName: {
						rules: [{
								required: true,
								errorMessage: '请输入员工姓名'
							},
							{
								maxLength: 10,
								errorMessage: '员工姓名长度最多 {maxLength} 个字符',
							},
						]
					},
					userName: {
						rules: [{
							required: true,
							errorMessage: '用户名不能为空'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}]
					},
					roleList: {
						rules: [{
							validateFunction: function(rule, value, data, callback) {
								if (value.length === 0) {
									callback('请选择员工角色')
								}
							}
						}],
					}
				},
			};
		},
		created() {
			this.getRoleList();
		},
		methods: {
			async getRoleList() {
				let res = await reqRoleList();
				if (res.code === 200) {
					this.roleInfoList = res.data;
				}
			},
			toSubmit() {
				this.$refs.form.validate().then(async (suc) => {
					// 新增
					let { userName, password, employeeName, roleList } = this.valiFormData;
					roleList = roleList.map(item => ({ id: item }));
					let res = await reqAddUser({ userName, password, employeeName, roleList });
					if (res.code === 200) {
						uni.utils.toast('创建成功', 'success');
						setTimeout(() => {
							this.$navBack();
						}, 1000)
					}
				}).catch((err) => {
					console.log('表单验证失败');
				})
			}
		},
	}
</script>

<style>
	page {
		background: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	.content {
		padding: 20rpx;
		box-sizing: border-box;

		.list {
			.item {
				padding: 20rpx 24rpx;
				background-color: #fff;
				border-radius: 8rpx;
				margin-bottom: 20rpx;

				&:nth-last-child(1) {
					margin-bottom: 0;
				}

				.line {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: $uni-font-size-small;
					color: #333;
					// margin-bottom: 10rpx;
					height: 50rpx;

					.left,
					.right {
						width: 50%;
					}

					.left {
						text-align: left;
					}

					.right {
						text-align: right;
					}
				}

				.btn {
					width: 120rpx !important;
					position: absolute;
					font-size: $uni-font-size-small;
					text-align: center;
					border-radius: 5rpx;
					height: 60rpx;
					box-sizing: border-box;
					line-height: 60rpx;
					bottom: 20rpx;
					right: 24rpx;
				}
			}
		}
	}

	.bottomFix {
		position: fixed;
		width: 100%;
		height: 80rpx;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: $uni-font-size-base;
	}
</style>